<template>
  <div class="taiji-container">
    <h1 class="page-title">太极客户信息管理/删除太极客户</h1>

    <div class="operation-bar">
      <el-select v-model="searchType" placeholder="请选择查询类型" style="width: 180px; margin-right: 15px;">
        <el-option label="会员编号" value="id" />
        <el-option label="姓名" value="name" />
      </el-select>
      <el-input
        v-model="searchKeyword"
        placeholder="请输入查询内容"
        style="width: 240px; margin-right: 15px;"
        @keyup.enter="handleSearch"
      />
      <el-button @click="handleSearch" type="primary" icon="el-icon-search">搜索</el-button>
      <el-button @click="resetSearch" type="info" icon="el-icon-refresh">重置</el-button>
      <el-button @click="fetchCustomers" type="success" icon="el-icon-refresh">刷新数据</el-button>
    </div>

    <el-table
      :data="tableData"
      height="500"
      style="width: 100%"
      class="customer-table"
      stripe
      v-loading="loading"
    >
      <el-table-column prop="date" label="注册日期" width="140" align="center" />
      <el-table-column prop="id" label="会员编号" width="100" align="center" />
      <el-table-column prop="name" label="姓名" width="100" align="center" />
      <el-table-column prop="gender" label="性别" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.gender === '男' ? 'primary' : 'danger'">{{ scope.row.gender }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100" align="center" />
      <el-table-column prop="phone" label="电话" width="170" align="center" />
      <el-table-column prop="level" label="太极水平" width="140" align="center">
        <template slot-scope="scope">
          <el-tag :type="getLevelTagType(scope.row.level)">{{ scope.row.level }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="course" label="课程类型" width="200" align="center">
        <template slot-scope="scope">
          <div class="course-display">
            <img :src="getCourseImage(scope.row.course)" class="course-icon" />
            <span class="course-text">{{ scope.row.course }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      taijiImages:{
        chen: require('@/assets/chen.jpg'),
        yang: require('@/assets/yang.jpg'),
        wu: require('@/assets/wu.jpg'),
        sword: require('@/assets/sword.jpg'),
        push: require('@/assets/push.jpg')
      },
      searchType: 'id',
      searchKeyword: '',
      loading: false,
      tableData: []
    }
  },
  methods: {
    fetchCustomers() {
      this.loading = true
      axios.get('/api/taiji/listtaiji').then(res => {
        this.tableData = res.data.data
        this.$message.success('数据加载成功')
      }).catch(() => {
        this.$message.error('获取数据失败')
      }).finally(() => {
        this.loading = false
      })
    },
    handleSearch() {
      if (!this.searchKeyword.trim()) {
        this.fetchCustomers()
        return
      }
      this.loading = true
      const params = {}
      if (this.searchType === 'id') {
        const idNumber = parseInt(this.searchKeyword, 10)
        if (isNaN(idNumber)) {
          this.$message.warning('会员编号必须是数字')
          this.loading = false
          return
        }
        params.id = idNumber
      } else {
        params.name = this.searchKeyword
      }
      axios.get('/api/taiji/searchtaiji', { params }).then(response => {
        if (response.data.code === 200) {
          this.tableData = response.data.data || []
          if (this.tableData.length === 0) {
            this.$message.warning('未找到匹配的客户')
          }
        } else {
          this.$message.error(response.data.message || '搜索失败')
        }
      }).catch(error => {
        this.$message.error('搜索过程中出错')
        console.error(error)
      }).finally(() => {
        this.loading = false
      })
    },
    resetSearch() {
      this.searchType = 'id'
      this.searchKeyword = ''
      this.fetchCustomers()
    },
    handleDelete(row) {
      this.$confirm(
        `确定要删除客户 ${row.name} (会员编号: ${row.id}) 吗？`,
        '警告',
        {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }
      ).then(() => {
        this.loading = true
        axios.delete(`/api/taiji/deletetaiji/${row.id}`).then(response => {
          if (response.data.code === 200) {
            this.$message.success('删除成功')
            this.fetchCustomers()
          } else {
            this.$message.error(response.data.message || '删除失败')
          }
        }).catch(error => {
          this.$message.error('删除过程中出错')
          console.error(error)
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {})
    },
    getLevelTagType(level) {
      if (level === '初级') return 'info'
      if (level === '中级') return ''
      if (level === '高级') return 'warning'
      if (level === '教练级') return 'success'
      return ''
    },
    getCourseImage(course) {
      const map = {
        '陈式太极': this.taijiImages.chen,
        '杨式太极': this.taijiImages.yang,
        '吴式太极': this.taijiImages.wu,
        '太极剑': this.taijiImages.sword,
        '太极推手': this.taijiImages.push
      }
      return map[course] || ''
    }
  },
  mounted() {
    this.fetchCustomers()
  }
}
</script>

<style scoped>
.taiji-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-title {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.customer-table {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.course-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.course-icon {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  object-fit: contain;
}

.course-text {
  font-size: 14px;
}
</style>
